<template>
	<view class="cc-slide-verify" :style="[ccSlideVerify]">
		<view class="cc-slide-verify-content" :style="[ccSlideVerifyContent]">
			<view class="cc-slide-verify-content" :style="[ccSlideVerifyContent1]" >{{ tip }}</view>
		</view>
		<view class="cc-slide-verify-drag" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend" :style="[ccSlideVerifyDrag]" >
			<block v-if="status === 'none'">
				<image class="cc-slide-verify-drag-image" src="https://kayouyou-1257308601.cos.ap-guangzhou.myqcloud.com/09820028f1b14ed587d8e05a935d2f32.png" mode="widthFix"></image>
			</block>
			<view class="cc-slide-verify-drag-check" v-else><uni-icons :type="succeccIcon" :size="iconSize":color="activeIconColor"></uni-icons></view>
		</view>
		<view class="cc-slide-verify-word">{{ tip }}</view>
	</view>
</template>

<script>
	export default {
		name: 'cc-slide-verify',
		components: {},
		props: {
			// 提示文字
			tip: {
				type: String,
				default: '拖动滑块到最右侧'
			},
			// 滑块条宽度
			slideWidth: {
				type: [Number, String],
				default: 600
			},
			// 滑块条高度
			slideHeight: {
				type: [Number, String],
				default: 60
			},
			// 滑块背景颜色
			bgColor: {
				type: String,
				default: '#E9E9E9'
			},
			// 验证之后的滑块背景颜色
			activeBgColor: {
				type: String,
				default: '#FF2521'
			},
			// 图标颜色
			iconColor: {
				type: String,
				default: '#cbcbcb'
			},
			// 验证成功之后图标颜色
			activeIconColor: {
				type: String,
				default: '#19be6b'
			},
			// 图标大小
			iconSize: {
				type: [Number, String],
				default: 14
			},
			// 字体大小
			fontSize: {
				type: [Number, String],
				default: 32
			},
			// 成功图标
			succeccIcon: {
				type: String,
				default: 'checkbox'
			}
		},
		data() {
			return {
				// 验证之后滑块宽度
				activeBarWidth: 0,
				status: 'none',
				transitionDuration: '0.6s',
				startX: 0
			}
		},
		methods: {
			initializedData(){
				this.activeBarWidth = 0
				this.startX = 0
				this.status = 'none'
			},
			touchstart(e) {
				this.startX = e.changedTouches[0].clientX
				this.transitionDuration = '0s'
			},
			touchmove(e) {
				let move = e.changedTouches[0].clientX
				if (this.startX - move > 0) return
				let dis = uni.upx2px(this.slideWidth) - uni.upx2px(80)
				this.activeBarWidth = -Math.floor(this.startX - move) >= dis ? dis : -Math.floor(this.startX - move)
			},
			touchend(e) {
				let dis = uni.upx2px(this.slideWidth) - uni.upx2px(80)
				if (this.activeBarWidth < dis) {
					this.transitionDuration = '0.6s'
					this.activeBarWidth = 0
				} else {
					this.activeBarWidth = dis
					this.status = 'done'
					return
				}
			}
		},
		mounted() {},
		onLoad() {},
		onShow() {},
		filters: {},
		computed: {
			ccSlideVerify() {
				const {
					slideWidth,
					slideHeight,
					fontSize,
					bgColor
				} = this
				return {
					width:`${slideWidth}rpx`,
					height:`${slideHeight}rpx`,
					fontSize: `${fontSize}rpx`,
					background: `${bgColor}`,
				}
			},
			ccSlideVerifyContent() {
				let { activeBarWidth, activeBgColor } = this
				activeBarWidth = activeBarWidth + uni.upx2px(80)
				return {
					width:`${activeBarWidth}px`,
					background: `${activeBgColor}`,
					transitionDuration:this.transitionDuration
				}
			},
			ccSlideVerifyContent1() {
				const { slideWidth,fontSize } = this
				return {
					width:`${slideWidth}rpx`,
					fontSize: `${fontSize}rpx`,
				}
			},
			ccSlideVerifyDrag() {
				const { activeBarWidth } = this
				return {
					transform:  `translateX(${activeBarWidth}px)`,
					transitionDuration:this.transitionDuration
				}
			}
		},
		watch: {
			status(val) {
				if (val === 'done') this.$emit('success')
			}
		}
	}
</script>

<style scoped lang="scss">
	.cc-slide-verify {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		border-radius: 200rpx;
		&-word{
			font-size: 32rpx;
			color: #B0B0B0;
		}
		&-drag {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;
			width: 86rpx;
			border-radius: 50%;
			box-shadow: 0rpx 4rpx 8rpx 0rpx #00000040;
			// background: #fff;
			position: absolute;
			left: -2rpx;
			top: 0;
			z-index: 2;
			transition: all;
			
			&-arrow {
				&:first-child {
					position: relative;
					left: 6rpx;
				}
			}
		}

		&-content {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;
			font-size: 32rpx;
			color: #B0B0B0;
			border-radius: 200rpx;
			overflow: hidden;
			transition: all;
			color: #fff;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 1;
		}
	}
</style>